<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" th:src="@{/static/js/jquery-3.3.1.min.js}"></script>
    <script>
        $(function () {
            $("#btnLogin").click(function () {
                alert("click");
                let username = $("#username").val();
                let password = $("#password").val();
                let codeText = $("#codeText").val();
                $.ajax({
                    url: "/login",
                    type: "POST",
                    data: {
                        "username": username,
                        "password": password,
                        "codeText": codeText
                    },
                    dataType: "json",
                    success: function (resp) {
                        alert(resp.msg);
                        fresh();
                        console.log(resp.code)
                        if (resp.code === 0) {
                            //登录成功
                            window.location.href = "/index";
                        }
                    }
                })
            })
        })
    </script>
</head>
<body>
<div>
    <span th:if="${param.logout}">
        您已退出登录
    </span>
</div>
<p>自定义登录页面-----前后端分离的ajax请求方式</p>
<div>
    用户名: <input type="text" id="username"><br>
    密&nbsp;码: <input type="password" id="password"><br>
    验证码: <input type="text" id="codeText" name="code"><br>
    <!--图像验证码-->
    <img id="imageCode" th:src="@{/captcha/code}" onclick="fresh()"><br>
    <script>
        function fresh() {
            var url = "/captcha/code?d=" + new Date();
            $("#imageCode").attr("src", url);
        }
    </script>
    <button id="btnLogin">使用ajax登录</button>
</div>
</body>
</html>